<template>
  <div id="wrapper">
    <!-- <img id="logo" src="~@/assets/logo.png" alt="electron-vue" /> -->
    <main>
      <div class="left-side">
        <span class="title"> LOL召唤师查询 </span>
        <el-input style="width: 200px; margin-top: 10px" v-model="nickname" clearable placeholder="召唤师搜索"></el-input>
        <el-button style="width: 100px; margin-top: 10px" type="primary" @click="getPlayer">查询</el-button>
        <el-select v-model="roles" multiple collapse-tags clearable placeholder="请选择">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <div style="height: 300px; overflow-y: auto">
          <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
            <el-table-column label="召唤师名称" width="180">
              <template slot-scope="scope">
                <div class="head_portrait">
                  <span class="img circle"><img
                      :src="`https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/usericon/${scope.row.icon_id}.png`"
                      width="48" height="48" alt="" /></span>
                  <span>{{ scope.row.nickname }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column sortable prop="name" label="所属大区" width="180">
              <template slot-scope="scope">
                {{ areaMap[scope.row.area].name }}
              </template>
            </el-table-column>
            <el-table-column sortable prop="level" label="等级">
              <template slot-scope="scope"> LV {{ scope.row.level }} </template>
            </el-table-column>
            <el-table-column prop="level" label="段位">
              <template slot-scope="scope">
                <span v-if="scope.row.tier === 255"> - - </span>
                <span v-else>
                  {{ levelConfig.tier[scope.row.tier] }}
                  {{ levelConfig.level[scope.row.queue] }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="right-side">
        <span class="title"> LOL游戏战绩查询 </span>
        <el-date-picker v-model="value1" @change="datePickerChange" value-format="timestamp" type="daterange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        <el-input-number v-model="num" :step="10" :min="10" step-strictly @change="numchange" placeholder="总局数">
        </el-input-number>
        <el-select v-model="competitionType" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-button style="width: 200px; margin-top: 10px" type="primary" @click="getHistory" :loading="loading">查询
        </el-button>
        <el-button style="width: 200px; margin-top: 10px" type="primary" @click="getHistorys" :loading="loading">批量查询
        </el-button>
        <ul id="copyImage">
          <li>
            <span>召唤师: </span>
            <span>{{ recordData.nickname }}</span>
          </li>
          <li>
            <span>总局数: </span>
            <span style="margin-right: 10px">{{ recordData.totalGames }}</span>
            <span>赢: </span>
            <span style="margin-right: 10px">{{ recordData.wins }}</span>
            <span>输: </span>
            <span style="margin-right: 10px">{{ recordData.losses }}</span>
            <span>胜率: </span>
            <span>{{ recordData.rate }} %</span>
          </li>
          <li>
            <span>MVP: </span>
            <span style="margin-right: 10px">{{ recordData.mvp }}</span>
            <span style="margin-right: 20px">{{ recordData.mvpRate }}%</span>
            <span>SVP: </span>
            <span style="margin-right: 10px">{{ recordData.svp }}</span>
            <span>{{ recordData.svpRate }}%</span>
          </li>
          <li></li>
          <li>
            <span>匹配赛: </span>
            <span style="margin-right: 10px">{{ recordData.matchNum }}</span>
            <span>大乱斗: </span>
            <span style="margin-right: 10px">{{ recordData.aramNum }}</span>
            <span>单双排: </span>
            <span style="margin-right: 10px">{{ recordData.rankNum }}</span>
            <span>灵活排位: </span>
            <span style="margin-right: 10px">{{ recordData.teamNum }}</span>
          </li>
          <li>
            <span>开黑次数: </span>
            <span style="margin-right: 10px">{{ recordData.blackoutTimes }}</span>
            <span v-if="recordData.blackoutTimes">{{ ((recordData.blackoutWins / recordData.blackoutTimes) *
              100).toFixed(2)
              }}% </span>
            <span style="margin-left: 20px">二黑: </span>
            <span style="margin-right: 10px">{{ recordData.twoBlack }}</span>
            <span v-if="recordData.twoBlack">{{ ((recordData.twoBlackWins / recordData.twoBlack) * 100).toFixed(2) }}%
            </span>
            <span style="margin-left: 20px">三黑: </span>
            <span style="margin-right: 10px">{{ recordData.threeBlack }}</span>
            <span v-if="recordData.threeBlack">{{ ((recordData.threeBlackWins / recordData.threeBlack) * 100).toFixed(2)
              }}% </span>
            <span style="margin-left: 20px">四黑: </span>
            <span style="margin-right: 10px">{{ recordData.fourBlack }}</span>
            <span v-if="recordData.fourBlack">{{ ((recordData.fourBlackWins / recordData.fourBlack) * 100).toFixed(2)
              }}% </span>
            <span style="margin-left: 20px">五黑: </span>
            <span style="margin-right: 10px">{{ recordData.fiveBlack }}</span>
            <span v-if="recordData.fiveBlack">{{ ((recordData.fiveBlackWins / recordData.fiveBlack) * 100).toFixed(2)
              }}% </span>
          </li>
          <li></li>
          <li></li>
        </ul>
        <el-button class="btn copy" style="width: 200px; margin-top: 10px" type="primary" @click="copy">复制文字</el-button>
        <el-button class="btn copy" style="width: 200px; margin-top: 10px" type="primary" @click="insert">插入表格
        </el-button>
      </div>
    </main>
    <div style="margin-top: 10px">
      <el-switch v-model="simplify">
      </el-switch>
      <el-button class="btn copy" style="width: 200px; margin-top: 10px" type="primary" @click="save">存储到本地</el-button>
      <el-button style="margin-left: 10px" type="danger" icon="el-icon-delete" circle @click="deleteData"></el-button>
      <div style="padding: 10px 0 0 65px;">{{ showDate }}</div>
      <el-table v-loading="loading" :data="tableData1" @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column key="id" type="selection" width="55"> </el-table-column>
        <el-table-column key="name" label="召唤师名称" width="180">
          <template slot-scope="scope">
            <div class="head_portrait">
              <span class="img circle"><img
                  :src="`https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/usericon/${scope.row.icon_id}.png`"
                  width="48" height="48" alt="" /></span>
              <span>{{ scope.row.nickname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="simplify" sortable key="field" :sort-method="sortField" label="净胜场" width="120">
          <template slot-scope="{ row }">
            <span>{{ row.wins - row.losses }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable key="blackfield" :sort-method="sortBlackfield" label="开黑净胜场" width="120">
          <template slot-scope="{ row }">
            <span>{{ row.blackoutWins * 2 - row.blackoutTimes }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="simplify" key="rate" sortable :sort-method="sortRate" prop="rate" label="胜率" width="100">
          <template slot-scope="scope"> {{ scope.row.rate }}% </template>
        </el-table-column>
        <el-table-column v-if="simplify" sortable prop="rate" key="blackrate" :sort-method="sortBlackRate" label="开黑胜率"
          width="120">
          <template slot-scope="{ row }">
            <span v-if="row.blackoutTimes"> {{ ((row.blackoutWins / row.blackoutTimes) * 100).toFixed(2) }}% </span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column v-if="simplify" key="singlerate" sortable prop="rate" :sort-method="sortSingleRate"
          label="单排胜率" width="120">
          <template slot-scope="{ row }">
            <span v-if="row.totalGames - row.blackoutTimes"> {{ (((row.wins - row.blackoutWins) / (row.totalGames -
              row.blackoutTimes)) * 100).toFixed(2)
              }}% </span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column key="blackCarry" sortable :sort-method="sortBlackCarry" prop="blackCarry" label="开黑CARRY"
          width="130">
          <template slot-scope="scope">
            <span style="margin-right: 10px">{{ scope.row.blackMvp + scope.row.blackSvp }}</span>
            <span>{{ (((scope.row.blackMvp + scope.row.blackSvp) / scope.row.blackoutTimes) * 100).toFixed(2) }}%</span>
          </template>
        </el-table-column>
        <el-table-column key="allCarry" v-if="simplify" sortable :sort-method="sortCarry" prop="allCarry" label="总CARRY"
          width="110">
          <template slot-scope="scope">
            <span style="margin-right: 10px">{{ scope.row.mvp + scope.row.svp }}</span>
            <span>{{ (((scope.row.mvp + scope.row.svp) / scope.row.totalGames) * 100).toFixed(2) }}%</span>
          </template>
        </el-table-column>
        <el-table-column key="wins" sortable prop="wins" label="胜" width="90">
          <template slot-scope="{ row }">
            <span>{{ row.blackoutWins }}</span>
            /
            <span>{{ row.wins }}</span>
          </template>
        </el-table-column>
        <el-table-column key="losses" prop="losses" label="负" width="90">
          <template slot-scope="{ row }">
            <span>{{ row.blackoutTimes - row.blackoutWins }}</span>
            /
            <span>{{ row.losses }}</span>
          </template>
        </el-table-column>
        <el-table-column key="totalGames" v-if="simplify" sortable prop="totalGames" label="总局数" width="90">
        </el-table-column>
        <el-table-column key="blackoutTimes" sortable prop="blackoutTimes" label="开黑局数" width="120">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.blackoutTimes }}</span>
            <span v-if="row.totalGames"> {{ ((row.blackoutTimes / row.totalGames) * 100).toFixed(2) }}% </span>
            <span v-else>——</span>
          </template>
        </el-table-column>

        <el-table-column key="mvp" v-if="simplify" sortable prop="mvp" label="MVP" width="90">
          <template slot-scope="scope">
            <span style="margin-right: 10px">{{ scope.row.mvp }}</span>
            <span>{{ scope.row.mvpRate }}%</span>
          </template>
        </el-table-column>
        <el-table-column key="svp" v-if="simplify" sortable prop="svp" label="SVP" width="90">
          <template slot-scope="scope">
            <span style="margin-right: 10px">{{ scope.row.svp }}</span>
            <span>{{ scope.row.svpRate }}%</span>
          </template>
        </el-table-column>
        <el-table-column key="KDA" prop="KDA" label="KDA" width="100">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ `${row.avgkills} / ${row.avgDeaths} / ${row.avgAssists}` }}</span>
          </template>
        </el-table-column>
        <el-table-column key="avgkills" sortable prop="avgkills" label="击杀" width="80">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.avgkills }}</span>
          </template>
        </el-table-column>
        <el-table-column key="avgDeaths" sortable prop="avgDeaths" label="死亡" width="80">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.avgDeaths }}</span>
          </template>
        </el-table-column>
        <el-table-column key="avgAssists" sortable prop="avgAssists" label="助攻" width="80">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.avgAssists }}</span>
          </template>
        </el-table-column>
        <el-table-column key="avgGame_score" sortable prop="avgGame_score" label="评分" width="80">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.avgGame_score }}</span>
          </template>
        </el-table-column>
        <el-table-column key="twoBlackWins" sortable prop="twoBlackWins" label="二黑" width="100">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.twoBlack }}</span>
            <span v-if="row.twoBlack">{{ ((row.twoBlackWins / row.twoBlack) * 100).toFixed(2) }}% </span>
          </template>
        </el-table-column>
        <el-table-column key="threeBlackWins" sortable prop="threeBlackWins" label="三黑" width="100">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.threeBlack }}</span>
            <span v-if="row.threeBlack">{{ ((row.threeBlackWins / row.threeBlack) * 100).toFixed(2) }}% </span>
          </template>
        </el-table-column>
        <el-table-column key="fourBlackWins" sortable prop="fourBlackWins" label="四黑" width="100">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.fourBlack }}</span>
            <span v-if="row.fourBlack">{{ ((row.fourBlackWins / row.fourBlack) * 100).toFixed(2) }}% </span>
          </template>
        </el-table-column>
        <el-table-column key="fiveBlackWins" sortable prop="fiveBlackWins" label="五黑" width="100">
          <template slot-scope="{ row }">
            <span style="margin-right: 10px">{{ row.fiveBlack }}</span>
            <span v-if="row.fiveBlack">{{ ((row.fiveBlackWins / row.fiveBlack) * 100).toFixed(2) }}% </span>
          </template>
        </el-table-column>
        <el-table-column key="area" v-if="simplify" prop="area" label="所属大区">
          <template slot-scope="scope">
            {{ areaMap[scope.row.area].name }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="level" label="等级">
          <template slot-scope="scope"> LV {{ scope.row.level }} </template>
        </el-table-column>
        <el-table-column prop="level" label="段位">
          <template slot-scope="scope">
            <span v-if="scope.row.tier === 255"> - - </span>
            <span v-else>
              {{ levelConfig.tier[scope.row.tier] }}
              {{ levelConfig.level[scope.row.queue] }}
            </span>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import ClipboardJS from "clipboard";
import { getLOLHistory, searchPlayer, searchPlayerAll } from "../../axios/api.js";
import { areaMap, levelConfig } from "./area";

export default {
  name: "landing-page",
  data() {
    return {
      simplify: false,
      loading: false,
      areaMap,
      levelConfig,
      nickname: "",
      competitionType: "aram",
      roles: [1, 2, 3, 4, 5],
      currentRow: {},
      value1: [],
      num: undefined,
      tableData: [],
      tableData1: [],
      recordData: {
        totalGames: 0,
        wins: 0,
        losses: 0,
        rate: 0,
        mvp: 0,
        svp: 0,
        svpRate: 0,
        mvpRate: 0,
        matchNum: 0,
        aramNum: 0,
        rankNum: 0,
        teamNum: 0,
        blackoutTimes: 0,
        twoBlack: 0,
        threeBlack: 0,
        fourBlack: 0,
        fiveBlack: 0,
        blackoutWins: 0,
        twoBlackWins: 0,
        threeBlackWins: 0,
        fourBlackWins: 0,
        fiveBlackWins: 0,
      },
      options: [
        {
          value: "",
          label: "全部比赛",
        },
        {
          value: "rank",
          label: "排位赛",
        },
        {
          value: "team",
          label: "灵活排位",
        },
        {
          value: "match",
          label: "匹配赛",
        },
        {
          value: "aram",
          label: "大乱斗",
        },
        {
          value: "penta_kill",
          label: "五杀",
        },
        {
          value: "multi_kill",
          label: "三、四杀",
        },
        {
          value: "mvp",
          label: "MVP",
        },
      ],
      options1: [
        {
          label: "李民生",
          value: 1,
          openid: "Tey4ucT1D9K7qR3D+nHoFQ==",
          area: 4,
          icon_id: 750,
        },
        {
          label: "太阳把把C",
          value: 2,
          openid: "HKrfJ4eSdQZsr9zzTJKVww==",
          area: 4,
          icon_id: 5484,
        },
        {
          label: "一路上挖坑",
          value: 3,
          openid: "zu3nd5EgplTL+0ASt1R21A==",
          area: 4,
          icon_id: 4096,
        },
        {
          label: "坑你到泪流",
          value: 4,
          openid: "BnAxQh98IKif2ZWtnd19wQ==",
          area: 4,
          icon_id: 4896,
        },
        // {
        //   label: "初夏舒心",
        //   value: 5,
        //   openid: "/0ca0BjsV9yBfOyxjzSvVg==",
        //   area: 4,
        //   icon_id: 4904,
        // },
        {
          label: "乌龙芝士桃桃奶芙",
          value: 5,
          openid: "tU6xs5HSPqZ8SuPwksXGUg==",
          area: 15,
          icon_id: 1594,
        },
        {
          label: "临摹烟火",
          value: 6,
          openid: "z+Fv4xlTzRz2FprH8XaK5w==",
          area: 4,
          icon_id: 5271,
        },
        {
          label: "晴凝酱",
          value: 7,
          openid: "KgL+Err5SEvPCWjGDvHuag==",
          area: 4,
          icon_id: 4379,
        },
        {
          label: "凌鸡一动",
          value: 8,
          openid: "2GE15B8EDvtua43PcSYgjg==",
          area: 4,
          icon_id: 5433,
        },
        {
          label: "半神半仙是半圣",
          value: 9,
          openid: "rqiIaKF0P1ovZyLaU0L1KQ==",
          area: 4,
          icon_id: 5031,
        },
        {
          label: "坑到你重开",
          value: 10,
          openid: "61XGt3YZOdDmXEnsSgUBkQ==",
          area: 4,
          icon_id: 783,
        },
      ],
      multipleSelection: [],
    };
  },
  mounted() {
    var lol = localStorage.getItem("lol");
    if (lol && Array.isArray(JSON.parse(lol))) {
      this.tableData1 = JSON.parse(lol);
    }
  },
  computed: {
    showDate() {
      if (this.value1.length) {
        return `${this.formatMsToDate(this.value1[0])}—${this.formatMsToDate(this.value1[1])}`
      } else {
        return ''
      }
    }
  },
  methods: {
    //该方法用于给日期、时间补零
    addZero(num) {
      if (parseInt(num) < 10) {
        num = "0" + num
      }
      return num
    },
    //把毫秒数转化成具体日期   2021-06-04 00:00:00
    //参数 毫秒数  
    formatMsToDate(ms) {
      if (ms) {
        var oDate = new Date(ms),
          oYear = oDate.getFullYear(),
          oMonth = oDate.getMonth() + 1,
          oDay = oDate.getDate(),
          oTime = oYear + '-' + this.addZero(oMonth) + '-' + this.addZero(oDay);
        return oTime;
      } else {
        return ""
      }
    },
    save() {
      localStorage.setItem("lol", JSON.stringify(this.tableData1));
    },
    deleteData() {
      this.tableData1 = this.tableData1.filter((v) => {
        return !this.multipleSelection.some((x) => x.openid === v.openid);
      });
    },
    datePickerChange() {
      this.num = undefined;
    },
    numchange() {
      this.value1 = [];
    },
    sortMath(a, b) {
      // console.log("排序", a, b);
      return a.rate - b.rate;
    },
    sortBlackCarry(a, b) {
      // console.log("排序", a, b);
      return (a.blackMvp + a.blackSvp) / a.blackoutTimes > (b.blackMvp + b.blackSvp) / b.blackoutTimes;
    },
    sortCarry(a, b) {
      // console.log("排序", a, b);
      return (a.mvp + a.svp) / a.totalGames > (b.mvp + b.svp) / b.totalGames;
    },
    sortRate(a, b) {
      // console.log("排序", a, b);
      return a.rate - b.rate;
    },
    sortField(a, b) {
      return a.wins - a.losses - b.wins + b.losses;
    },
    sortBlackfield(a, b) {
      return a.blackoutWins * 2 - a.blackoutTimes - b.blackoutWins * 2 + b.blackoutTimes;
    },
    sortBlackRate(a, b) {
      // console.log("排序", a, b);
      if (!a.blackoutTimes) {
        return false;
      }
      if (!b.blackoutTimes) {
        return true;
      }
      return a.blackoutWins / a.blackoutTimes > b.blackoutWins / b.blackoutTimes;
    },
    sortSingleRate(a, b) {
      // console.log("排序", a, b);
      if (!(a.totalGames - a.blackoutTimes)) {
        return false;
      } else if (!(b.totalGames - b.blackoutTimes)) {
        return true;
      }
      return (a.wins - a.blackoutWins) / (a.totalGames - a.blackoutTimes) > (b.wins - b.blackoutWins) / (b.totalGames - b.blackoutTimes);
    },
    insert() {
      console.log("插入数据", this.recordData);
      const newData = Object.assign(this.recordData);
      this.tableData1 = [...this.tableData1, newData];
    },
    copy() {
      const that = this;

      var clipboard = new ClipboardJS(".copy", {
        target: function () {
          return document.querySelector("#copyImage");
        },
      });
      clipboard.on("success", function (e) {
        that.$notify.closeAll();
        that.$notify.success({
          title: "复制文字成功",
        });
        console.info("Action:", e.action);
        console.info("Text:", e.text);
        console.info("Trigger:", e.trigger);
        e.clearSelection();
      });

      clipboard.on("error", function (e) {
        console.error("Action:", e.action);
        console.error("Trigger:", e.trigger);
      });
    },
    handleSelectionChange(val) {
      console.log("多选的", val);
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      console.log("当前选择", val);
      this.currentRow = val;
    },
    open(link) {
      this.$electron.shell.openExternal(link);
    },
    getHistory() {
      console.log(323, this.value1);
      if ((!this.value1 || this.value1.length != 2) && !this.num) {
        this.$message({
          message: "请输入日期或者总局数",
          type: "error",
        });
        return;
      }
      if (!this.tableData.length) {
        const firstOne = this.roles[0];
        if (firstOne) {
          const firstObj = this.options1
            .filter((v) => firstOne === v.value)
            .map((v) => ({
              ...v,
              nickname: v.label,
            }));
          this.currentRow = firstObj[0];
        }
      }
      if (!this.currentRow.openid) {
        this.$message({
          message: "请选择要查找的召唤师",
          type: "error",
        });
        return;
      }
      this.loading = true;
      this.recordData = {
        totalGames: 0,
        wins: 0,
        losses: 0,
        rate: 0,
        mvp: 0,
        svp: 0,
        svpRate: 0,
        mvpRate: 0,
        matchNum: 0,
        aramNum: 0,
        rankNum: 0,
        teamNum: 0,
        blackoutTimes: 0,
        twoBlack: 0,
        threeBlack: 0,
        fourBlack: 0,
        fiveBlack: 0,
        blackoutWins: 0,
        twoBlackWins: 0,
        threeBlackWins: 0,
        fourBlackWins: 0,
        fiveBlackWins: 0,
        kills: 0, // 杀人数
        deaths: 0, // 死亡数
        assists: 0, // 助攻
        game_score: 0, // 评分
      };
      getLOLHistory({
        num: this.num,
        timer: this.value1,
        id: this.currentRow.openid,
        area: this.currentRow.area,
        filter: this.competitionType,
      })
        .then((res) => {
          this.loading = false;
          this.recordData = {
            ...this.currentRow,
            ...this.recordData,
            ...this.handlerData(res),
          };
        })
        .catch((error) => {
          console.log("错误", error);
          this.loading = false;
        });
    },
    // 处理数据
    handlerData(source) {
      const effectiveCompetition = source.filter((v) => v.was_early_surrender === 0);
      const totalGames = effectiveCompetition.length;
      let wins = 0;
      let losses = 0;
      let mvp = 0;
      let svp = 0;
      let matchNum = 0;
      let aramNum = 0;
      let rankNum = 0;
      let teamNum = 0;
      let blackoutTimes = 0;
      let twoBlack = 0;
      let threeBlack = 0;
      let fourBlack = 0;
      let fiveBlack = 0;
      let blackoutWins = 0;
      let twoBlackWins = 0;
      let threeBlackWins = 0;
      let fourBlackWins = 0;
      let fiveBlackWins = 0;
      let rate = 0;
      let mvpRate = 0;
      let svpRate = 0;
      let blackMvp = 0;
      let blackSvp = 0;
      let kills = 0;
      let deaths = 0;
      let assists = 0;
      let game_score = 0;
      let avgkills = 0;
      let avgDeaths = 0;
      let avgAssists = 0;
      let avgGame_score = 0;
      effectiveCompetition.forEach((v) => {
        kills += v.kills;
        deaths += v.deaths;
        assists += v.assists;
        game_score += v.game_score;
        if (v.win === "Win") {
          wins += 1;
        } else {
          losses += 1;
        }
        if (v.was_mvp === 1) {
          mvp += 1;
        }
        if (v.was_svp === 1) {
          svp += 1;
        }
        if ([430].includes(v.game_queue_id)) {
          matchNum += 1;
        }
        if ([450].includes(v.game_queue_id)) {
          aramNum += 1;
        }
        if ([420].includes(v.game_queue_id)) {
          rankNum += 1;
        }
        if ([440].includes(v.game_queue_id)) {
          teamNum += 1;
        }
        if (v.team_made_size > 1) {
          blackoutTimes += 1;
          if (v.win === "Win") {
            blackoutWins += 1;
          }
          if (v.was_mvp === 1) {
            blackMvp += 1;
          }
          if (v.was_svp === 1) {
            blackSvp += 1;
          }
          if (v.team_made_size === 2) {
            twoBlack += 1;
            if (v.win === "Win") {
              twoBlackWins += 1;
            }
          }
          if (v.team_made_size === 3) {
            threeBlack += 1;
            if (v.win === "Win") {
              threeBlackWins += 1;
            }
          }
          if (v.team_made_size === 4) {
            fourBlack += 1;
            if (v.win === "Win") {
              fourBlackWins += 1;
            }
          }
          if (v.team_made_size === 5) {
            fiveBlack += 1;
            if (v.win === "Win") {
              fiveBlackWins += 1;
            }
          }
        }
      });
      if (totalGames) {
        rate = ((wins / totalGames) * 100).toFixed(2);
        mvpRate = ((mvp / totalGames) * 100).toFixed(2);
        svpRate = ((svp / totalGames) * 100).toFixed(2);
        avgkills = +(kills / totalGames).toFixed(0);
        avgDeaths = +(deaths / totalGames).toFixed(0);
        avgAssists = +(assists / totalGames).toFixed(0);
        avgGame_score = +(game_score / totalGames / 10000).toFixed(1);
      }
      const recordData = {
        totalGames,
        rate,
        mvpRate,
        svpRate,
        wins,
        losses,
        mvp,
        svp,
        matchNum,
        aramNum,
        rankNum,
        teamNum,
        blackoutTimes,
        twoBlack,
        threeBlack,
        fourBlack,
        fiveBlack,
        blackoutWins,
        twoBlackWins,
        threeBlackWins,
        fourBlackWins,
        fiveBlackWins,
        blackMvp,
        blackSvp,
        avgkills,
        avgDeaths,
        avgAssists,
        avgGame_score,
      };
      return recordData;
    },
    // 批量查询
    getHistorys() {
      console.log(323, this.value1);
      if ((!this.value1 || this.value1.length != 2) && !this.num) {
        this.$message({
          message: "请输入日期或者总局数",
          type: "error",
        });
        return;
      }
      if (!this.roles.length) {
        this.$message({
          message: "请选择要查找的召唤师",
          type: "error",
        });
        return;
      }
      this.loading = true;
      const allrequest = this.options1
        .filter((v) => this.roles.includes(v.value))
        .map((v) =>
          getLOLHistory({
            num: this.num,
            timer: this.value1,
            id: v.openid,
            area: v.area,
            filter: this.competitionType,
          })
        );
      const allrequestParams = this.options1
        .filter((v) => this.roles.includes(v.value))
        .map((v) => ({
          ...v,
          nickname: v.label,
        }));
      Promise.all(allrequest)
        .then((res) => {
          this.loading = false;
          console.log(33, res);
          this.tableData1 = res.map((x, xIndex) => {
            return { ...allrequestParams[xIndex], ...this.handlerData(x) }
          });
        })
        .catch((error) => {
          console.log("错误", error);
          this.loading = false;
        });
    },
    getPlayer() {
      console.log(323, this.value1);
      if (!this.nickname) {
        this.$message({
          message: "请输入召唤师",
          type: "error",
        });
        return;
      }
      searchPlayerAll({
        nickname: this.nickname,
        allCount: 200,
        areaId: 4,
        areaName: "诺克萨斯",
        seleMe: 1,
        filter: 1,
        lzyumiSign: 'e40bd67b39f23b397a0fbf8290ba38c6',
        openId: "Tey4ucT1D9K7qR3D+nHoFQ==",
        signStr: '52422182536666',
      }).then((res) => {
        console.log("新街口", res);
        // this.tableData = res.map((v) => ({ ...v, nickname: this.nickname }));
      });
      // searchPlayer({
      //   nickname: this.nickname,
      // }).then((res) => {
      //   console.log("zhj", res);
      //   this.tableData = res.map((v) => ({ ...v, nickname: this.nickname }));
      // });
    },
  },
};
</script>

<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

body {
  font-family: "Source Sans Pro", sans-serif;
}

#wrapper {
  background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 1) 40%, rgba(229, 229, 229, 0.9) 100%);
  height: 100vh;
  padding: 20px 20px;
  width: 100vw;
}

#logo {
  height: auto;
  margin-bottom: 20px;
  width: 420px;
}

main {
  display: flex;
  justify-content: space-between;
}

main>div {
  flex: 1;
}

.left-side {
  /* display: flex;
  flex-direction: column; */
}

.right-side {
  margin-left: 20px;
}

.welcome {
  color: #555;
  font-size: 23px;
  margin-bottom: 10px;
}

.title {
  color: #2c3e50;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 6px;
}

.title.alt {
  font-size: 18px;
  margin-bottom: 10px;
}

.doc p {
  color: black;
  margin-bottom: 10px;
}

.doc button {
  font-size: 0.8em;
  cursor: pointer;
  outline: none;
  padding: 0.75em 2em;
  border-radius: 2em;
  display: inline-block;
  color: #fff;
  background-color: #4fc08d;
  transition: all 0.15s ease;
  box-sizing: border-box;
  border: 1px solid #4fc08d;
}

.doc button.alt {
  color: #42b983;
  background-color: transparent;
}
</style>
<style scoped>
.head_portrait {
  display: flex;
  align-items: center;
}

.circle img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 100%;
}
</style>
